<template>
    <mt-popup v-model="popupVisibleShow" position="bottom" :id="id">
        <pr-row class="area--title">
            <pr-col hor="center" @handleClick="cancel">取消</pr-col>
            <pr-col hor="center" @handleClick="ensureSel">确定</pr-col>
        </pr-row>
        <!--三级城市联动-->
        <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5">
        </mt-picker>
    </mt-popup>
</template>
<style lang="less" scoped>
    @import "./../../assets/css/variable_gather";
    .area--title{
        padding: .1rem 0;
        .font-dpr(16px);
    }
</style>
<script>
    import {address} from 'util/lib/baseData'
    export default{
        props: {
            popShow: {
                type: Boolean,
                default: false
            },
            region: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                default: 'three-area-picker'
            }
        },
        data(){
            return{
                province: '',
                city: '',
                area: '',
                popupVisible: false,
                addressSlots: [
                      {
                        flex: 1,
                        values: address.map(v=>v.name),
                        className: 'slot1',
                        textAlign: 'center'
                      }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                      }, {
                        flex: 1,
                        values: ['请选择'],
                        className: 'slot3',
                        textAlign: 'center'
                      }, {
                        divider: true,
                        content: '-',
                        className: 'slot4'
                      }, {
                        flex: 1,
                        values: ['请选择'],
                        className: 'slot5',
                        textAlign: 'center'
                      }
                ],
            }
        },
        components:{

        },
        computed:{
            popupVisibleShow() {
               this.popupVisible =  this.popShow;
                return this.popupVisible
            }
        },
        methods:{
            onAddressChange(picker, values) {
                if(this.province !== values[0]){
                    if(values[0] === '请选择'){
                        picker.setSlotValues(1,['请选择']);
                        picker.setSlotValues(2,['请选择']);
                        values[0] = '';
                        values[1] = '';
                        values[2] = '';
                    }else{
                        let cityList = address.filter(add => add.name === values[0])[0].city.map(c => c.name);
                        cityList.unshift('请选择');
                        picker.setSlotValues(1, cityList);
                        values[1] = '';
                        values[2] = '';
                    }
                }else if(this.city !== values[1]){
                    if(values[1] === '请选择'){
                        picker.setSlotValues(2,['请选择']);
                        values[1] = '请选择';
                        values[2] = '请选择';
                    }else {
                        let areaList = address
                            .filter(add => add.name === values[0])[0].city
                            .filter(c => c.name === values[1])[0].area;
                        areaList.unshift('请选择');
                        picker.setSlotValues(2, areaList);
                        values[2] = '';
                    }
                }else if(this.area !== values[2]){
                    if(values[2] === '请选择'){
                        values[2] = '';
                    }
                }
                this.province = values[0];
                this.city = values[1];
                this.area = values[2];
            },
            cancel() {
                this.popupVisible = false;
                this.province = this.city = this.city = '';
                this.$emit('selAreaCancel');
            },
            ensureSel() {
                this.popupVisible = false;
                let realArea = '';
                if(!_.isEmpty(this.province) && this.province !== '请选择'){
                    if(!_.isEmpty(this.city) && this.city !== '请选择'){
                        if(!_.isEmpty(this.area) && this.area !== '请选择'){
                            realArea = `${this.province},${this.city},${this.area}`;
                        }else {
                            realArea = `${this.province},${this.city}`;
                        }
                    }else {
                        realArea = this.province;
                    }
                }else {
                     realArea = ''
                }
                this.$emit('selAreaSuccess',realArea)
            }
        },
        created(){

            let transArea = this.region.indexOf(',') && this.region.split(',');
            this.province = transArea[0] || '北京';
            this.city = transArea[1] || '请选择';
            this.city = transArea[2] || '请选择';
        },
        mounted(){
        },
        destroyed() {
            this.province = '北京';
            this.city = '';
            this.area = '';
        }
    }
</script>
